<script setup>
import { getOrderAPI } from '@/api/order.js'
import { dayjs } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router'
const router=useRouter()
const route = useRoute()
const OrderDetail = ref()
const nowTime = ref()
const islatest = ref(false)
const getOrder = async () => {
  const id = route.params.id
  const res = await getOrderAPI(id)
  OrderDetail.value = res.data.result
  setInterval(() => {
    if (OrderDetail.value.countdown <= 0) {
      islatest.value = true
      return
    }
    OrderDetail.value.countdown--
    nowTime.value = dayjs(OrderDetail.value.countdown * 1000).format(
      'mm分钟ss秒'
    )
  }, 1000)
}
onMounted(() => {
  getOrder()
})
const payChannel = ref(1)
const payType = ref(1)
//选择支付方式
const handle1 = (index) => {
  payChannel.value = index
}
const handle2 = (index) => {
  payType.value = index
}
const paySuccess=()=>{
  router.push('/paySuccess')
}
</script>
<template>
  <div class="order">
    <div v-if="islatest">
      <h2 style="color: red">支付时间超过，已取消订单</h2>
    </div>
    <div v-else>
      <el-row class="head">
        <el-col :span="17" :offset="2" class="submitVal">
          <el-image src="/assets/提交成功.jpg" class="submitImg"></el-image>
          <div>
            <h2>订单提交成功，请尽快支付</h2>

            <p class="timeout">支付还剩{{ nowTime }}，超时将取消订单</p>
          </div>
        </el-col>

        <el-col :span="5" class="money"
          ><p>
            应付金额：<span>￥{{ OrderDetail?.totalMoney }}</span>
          </p></el-col
        >
      </el-row>
    </div>
    <div class="floor">
      <h3>选择以下支付方式付款</h3>
      <h4>支付平台</h4>
      <el-check-tag
        class="wx"
        color="green"
        :checked="payChannel === 1"
        @click="handle1(1)"
        >微信</el-check-tag
      >
      <el-check-tag
        class="zfb"
        color="blue"
        :checked="payChannel === 2"
        @click="handle1(2)"
        >支付宝</el-check-tag
      >
      <h4>支付方式</h4>
      <el-check-tag class="zs" :checked="payType === 1" @click="handle2(1)"
        >招商银行</el-check-tag
      >
      <el-check-tag class="ny" :checked="payType === 2" @click="handle2(2)"
        >农业银行</el-check-tag
      >
      <el-check-tag class="gs" :checked="payType === 3" @click="handle2(3)"
        >工商银行</el-check-tag
      >
      <el-check-tag class="js" :checked="payType === 4" @click="handle2(4)"
        >建设银行</el-check-tag
      >
      <div class="btn">
        <el-button type="warning" @click="paySuccess">去支付</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.order {
  background-color: #f1f0ed;
  padding: 3%;
  .head {
    h2 {
      color: #1ba784;
    }
    .timeout {
      color: #5e7987;
    }
  }
  & > div {
    background-color: white;
    width: 98%;
    margin: 0 auto 3%;
  }

  .btn {
    display: flex;
    width: 90%;
    justify-content: end;
    padding-bottom: 2%;
  }
  .floor {
    .el-check-tag {
      margin: 0 1%;
    }
    & > h4 {
      font-family: 加油鸭;
    }
  }
  h3 {
    font-family: 像素字体;
    border-bottom: 1px solid grey;
    margin-bottom: 2%;
  }
  .money {
    font-family: 小可奶酪体;
    display: flex;
    align-items: center;
    p {
      font-size: 18px;
      span {
        color: red;
      }
    }
  }
  .submitVal {
    display: flex;
    align-items: center;
    & > div {
      font-family: 清松;
    }
    .submitImg {
      width: 10%;
    }
  }
}
</style>
